<template>
  <view class="detail-page">
    <up-navbar title="今日泊位异常详情" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
    
    <view class="detail-content">
      <view class="summary-card">
        <view class="summary-header">
          <text class="summary-title">今日泊位异常统计</text>
          <text class="summary-date">{{ getCurrentDate() }}</text>
        </view>
        <view class="summary-data">
          <view class="data-item">
            <text class="data-label">总数量</text>
            <text class="data-value">{{ totalCount }}</text>
          </view>
          <view class="data-item">
            <text class="data-label">已处理</text>
            <text class="data-value">{{ processedCount }}</text>
          </view>
          <view class="data-item">
            <text class="data-label">处理率</text>
            <text class="data-value">{{ processRate }}%</text>
          </view>
        </view>
      </view>
      
      <view class="list-section">
        <view class="section-header">
          <text class="section-title">异常泊位列表</text>
          <text class="refresh-btn" @click="refreshList">刷新</text>
        </view>
        
        <z-paging ref="paging" v-model="abnormalList" @query="queryList" :auto="true" :refresher-enabled="true">
          <view class="list-content">
            <view v-for="(item, index) in abnormalList" :key="index" class="list-item">
              <view class="item-header">
                <text class="berth-number">{{ item.berthNumber }}</text>
                <text :class="['status-tag', item.status === '已处理' ? 'status-processed' : 'status-pending']">{{ item.status }}</text>
              </view>
              <view class="item-info">
                <view class="info-row">
                  <text class="info-label">异常类型：</text>
                  <text class="info-value">{{ item.type }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">异常位置：</text>
                  <text class="info-value">{{ item.location }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">发现时间：</text>
                  <text class="info-value">{{ item.time }}</text>
                </view>
              </view>
              <view class="item-footer">
                <text class="footer-text">发现人：{{ item.inspector }}</text>
                <view class="action-btn" v-if="item.status !== '已处理'" @click="handleProcess(item)">处理</view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const paging = ref(null)
const abnormalList = ref([])
const totalCount = ref(0)
const processedCount = ref(0)

// 计算处理率
const processRate = computed(() => {
  if (totalCount.value === 0) return 0
  return Math.round((processedCount.value / totalCount.value) * 100)
})

// 获取当前日期
const getCurrentDate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const day = now.getDate()
  return `${year}年${month}月${day}日`
}

// 查询列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    // 模拟数据
    const mockData = [
      {
        berthNumber: 'A-001',
        status: '待处理',
        type: '设备故障',
        location: '东区停车场A区1号',
        time: '2023-06-15 08:30:15',
        inspector: '张三'
      },
      {
        berthNumber: 'B-015',
        status: '已处理',
        type: '信号丢失',
        location: '西区商业街B区15号',
        time: '2023-06-15 09:45:30',
        inspector: '李四'
      },
      {
        berthNumber: 'C-008',
        status: '待处理',
        type: '数据异常',
        location: '南区公园C区8号',
        time: '2023-06-15 10:20:45',
        inspector: '王五'
      },
      {
        berthNumber: 'D-023',
        status: '待处理',
        type: '占用超时',
        location: '北区住宅区D区23号',
        time: '2023-06-15 11:15:10',
        inspector: '赵六'
      },
      {
        berthNumber: 'E-007',
        status: '已处理',
        type: '设备故障',
        location: '中心广场E区7号',
        time: '2023-06-15 12:30:55',
        inspector: '钱七'
      }
    ]
    
    // 更新统计数据
    totalCount.value = mockData.length
    processedCount.value = mockData.filter(item => item.status === '已处理').length
    
    // 返回分页数据
    paging.value.complete(mockData)
  } catch (error) {
    console.error('获取泊位异常列表失败:', error)
    paging.value.complete(false)
  }
}

// 刷新列表
const refreshList = () => {
  paging.value.reload()
}

// 处理异常
const handleProcess = (item) => {
  uni.showModal({
    title: '处理泊位异常',
    content: `确认处理泊位号为 ${item.berthNumber} 的异常记录？`,
    success: (res) => {
      if (res.confirm) {
        // 更新状态
        item.status = '已处理'
        processedCount.value++
        
        uni.showToast({
          title: '处理成功',
          icon: 'success'
        })
      }
    }
  })
}

onMounted(() => {
  // 初始化加载数据
})
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.detail-content {
  padding: 30rpx;
}

.summary-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .summary-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .summary-date {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .summary-data {
    display: flex;
    justify-content: space-between;
    
    .data-item {
      flex: 1;
      text-align: center;
      
      .data-label {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .data-value {
        font-size: 36rpx;
        font-weight: 600;
        color: #1890ff;
        display: block;
      }
    }
  }
}

.list-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .refresh-btn {
      font-size: 26rpx;
      color: #1890ff;
    }
  }
  
  .list-content {
    .list-item {
      border-bottom: 1px solid #eee;
      padding: 20rpx 0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;
        
        .berth-number {
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
        }
        
        .status-tag {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          
          &.status-processed {
            background-color: #e6f7ff;
            color: #1890ff;
          }
          
          &.status-pending {
            background-color: #fff7e6;
            color: #fa8c16;
          }
        }
      }
      
      .item-info {
        margin-bottom: 15rpx;
        
        .info-row {
          display: flex;
          margin-bottom: 10rpx;
          
          .info-label {
            font-size: 26rpx;
            color: #666;
            width: 160rpx;
          }
          
          .info-value {
            font-size: 26rpx;
            color: #333;
            flex: 1;
          }
        }
      }
      
      .item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .footer-text {
          font-size: 24rpx;
          color: #999;
        }
        
        .action-btn {
          font-size: 24rpx;
          color: #fff;
          background-color: #1890ff;
          padding: 8rpx 20rpx;
          border-radius: 4rpx;
        }
      }
    }
  }
}
</style>